<template>
  <div class="yb-cont">
    <div class="bg">
      <div class="bg-item">
          <div class="eacher" ref="echart1"></div>
          <div class="info">每日銷售</div>
          <p>今天的销售额增长了<span>55%</span></p>
          <span>
            <i class="iconfont icon-4"></i>&nbsp;&nbsp;&nbsp;&nbsp;4分钟前更新
          </span>
      </div>
      <div class="bg-item">
          <div class="eacher eacher1" ref="echart2"></div>
          <div class="info">电子邮件订阅</div>
          <p>上次广告系列效果</p>
          <span>
            <i class="iconfont icon-4"></i>&nbsp;&nbsp;&nbsp;&nbsp;10分钟前更新
          </span>
      </div>
      <div class="bg-item">
          <div class="eacher eacher2" ref="echart3"></div>
          <div class="info">完成的任务</div>
          <p>最后一次广告系列效果</p>
          <span>
            <i class="iconfont icon-4"></i>&nbsp;&nbsp;&nbsp;&nbsp;活动在26分钟前发送
          </span>
      </div>
    </div>
    <div class="sfg">
      <div class="sfg-item">
        <div class="sfg-top">
          <div class="logo iconfont icon-chaoshi"></div>
          <p>收入</p>
          <h2>$34,245</h2>
        </div>
        <div class="sfg-bom">
          <p><i class="iconfont icon-rili"></i>过去24小时</p>
        </div>
      </div>
       <div class="sfg-item">
        <div class="sfg-top">
          <div class="logo iconfont icon-zhizhang_"></div>
          <p>已用空间</p>
          <h2>49/50GB</h2>
        </div>
        <div class="sfg-bom">
          <p><i class="iconfont icon-wenti"></i>获得更多空间</p>
        </div>
      </div>
       <div class="sfg-item">
        <div class="sfg-top">
          <div class="logo iconfont icon-wenti"></div>
          <p>已修复问题</p>
          <h2>75</h2>
        </div>
        <div class="sfg-bom">
          <p><i class="iconfont icon-biaoqian"></i>跟踪Github</p>
        </div>
      </div>
       <div class="sfg-item">
        <div class="sfg-top">
          <div class="logo iconfont icon-tuite"></div>
          <p>关注</p>
          <h2>+245</h2>
        </div>
        <div class="sfg-bom">
          <p><i class="iconfont icon-4"></i>刚跟新</p>
        </div>
      </div>
    </div>
    <div class="bombg">
      <div class="left-bg bom-bg">
        <div class="top">
          <p>员工统计</p>
          <span>2016年9月15日新员工</span>
        </div>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>名称</th>
              <th>薪水</th>
              <th>国家</th>
              <th>市</th>
            </tr>
          </thead>
          <tbody>
              <tr v-for="(item, index) in list" :key="index">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.xz }}</td>
                <td>{{ item.gj }}</td>
                <td>{{ item.s }}</td>
              </tr>
          </tbody>
        </table>
      </div>
      <div class="right-bg bom-bg">
        <div class="top">
          <span>
            任务：
            <a href="javascript:;" class="aCont">
              <i class="iconfont icon-debug"></i>&nbsp;&nbsp;错误
            </a>
            <a href="javascript:;">
              <i class="iconfont icon-daimakuai"></i>&nbsp;&nbsp;网站
            </a>
            <a href="javascript:;">
              <i class="iconfont icon-fuwuqi"></i>&nbsp;&nbsp;服务器
            </a>
          </span>
        </div>
        <div class="bomCont">
          <div class="bom-list">
            <div class="fxk">
              <input type="checkbox">
            </div>
              <p>签署“什么是会议组织害怕？”的合同？</p>
            <div class="bom-icon">
              <i class="iconfont icon-icon01"></i>
              <i class="iconfont icon-cuowu"></i>
            </div>
          </div>
          <div class="bom-list">
            <div class="fxk">
              <input type="checkbox">
            </div>
              <p>俄罗斯伟大文学的路线？或者来自我的老板的电子邮件？</p>
            <div class="bom-icon">
              <i class="iconfont icon-icon01"></i>
              <i class="iconfont icon-cuowu"></i>
            </div>
          </div>
          <div class="bom-list">
            <div class="fxk">
              <input type="checkbox">
            </div>
              <p>淹水：一年后，评估失去的东西以及当一场肆虐的雨席卷底特律地铁时发现的情况</p>
            <div class="bom-icon">
              <i class="iconfont icon-icon01"></i>
              <i class="iconfont icon-cuowu"></i>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>
</template>

<script>
import '../../assets/font/iconfont.css'
import echarts from 'echarts'
export default {
  data () {
    return {
      list:[
        {id:'1',name:'达科塔莱斯',xz:'$ 35,738',gj:'尼日尔',s:'的Oud-Tunrhout'},
        {id:'2',name:'Minerva Hooper',xz:'$ 23,738',gj:'库拉索',s:'Sinaai-WAAS'},
        {id:'3',name:'Sage Rodriguez',xz:'$ 56,142',gj:'荷兰',s:'陆上公园'},
        {id:'4',name:'菲利普查利',xz:'$ 38,735',gj:'韩国，南方',s:'格洛斯特'},
        {id:'5',name:'多丽丝格林',xz:'$ 63,542',gj:'马拉维',s:'费尔德基兴在Kārnten'},
      ],
      echart_z:null,
      echart_c:null,
      echart_y:null,
    }
  },

  methods: {
    echartsone(){
      this.echart_z = echarts.init(this.$refs.echart1);
      // 绘制图表
      this.echart_z.setOption({
        color: "rgba(255, 255, 255, 0.8)",
        tooltip: {},
        xAxis: {
          data: ["M", "T", "W", "T", "F", "S", "S"]
        },
        yAxis: {
          max: 45,
          interval: 5
        },
        series: [
          {
            name: "销量",
            type: "line",
            data: [11, 17, 6, 18, 23, 19, 37]
          }
        ]
      });

    },
    echartstwo(){
      this.echart_c = echarts.init(this.$refs.echart2);
      // 绘制图表
      this.echart_c.setOption({
        color: "rgba(255, 255, 255, 0.8)",
        tooltip: {},
        xAxis: {
          data: [
            "Ja",
            "Fe",
            "Ma",
            "Ap",
            "Mai",
            "Ju",
            "Jul",
            "Au",
            "Se",
            "Oc",
            "No",
            "De"
          ]
        },
        yAxis: {
          max: 900,
          interval: 100
        },
        series: [
          {
            name: "销量",
            type: "bar",
            data: [520, 420, 310, 790, 550, 450, 310, 420, 570, 610, 750, 890]
          }
        ]
      });

    },
    echartsthree(){
      this.echart_y = echarts.init(this.$refs.echart3);
      // 绘制图表
      this.echart_y.setOption({
        color: "rgba(255, 255, 255, 0.8)",
        tooltip: {},
        xAxis: {
          data: ["12am", "3pm", "6pm", "9pm", "12am", "3pm", "6pm", "9pm"]
        },
        yAxis: {
          max: 900,
          interval: 100
        },
        series: [
          {
            name: "销量",
            type: "line",
            data: [210, 750, 450, 300, 280, 240, 200, 190]
          }
        ]
      });

    }
  },
  mounted() {
    this.echartsone()
    this.echartstwo()
    this.echartsthree()
  },
}
</script>

<style lang='less'  scoped>
a{
  text-decoration: none;
  color:black;
}
.yb-cont{
  margin-left: 260px;
  margin-top: 30px;
  .bg{
    width: 100%;
    display: flex;
    .bg-item{
      height: 100%;
      flex: 1;
      margin: 20px;
      background: white;
      box-sizing: border-box;
      position: relative;
      padding:10px 20px;
      .eacher{
        width: 100%;
        height: 400px;
        background: rgb(12, 180, 201);
        border-radius: 15px;
        margin-top: -30px;
      }
      .eacher1{
        background: rgb(233, 69, 66)
      }
      .eacher2{
        background: rgb(91, 179, 95)
      }
      .info{
        margin: 20px 0 0 20px;
        color: #979797;
        font-size: 20px;
      }
      p{
        margin: 10px 0 10px 20px;
        padding-bottom: 20px;
         color: #979797;
         border-bottom: 1px solid #eee;
        span{
          color: #A4D7A6;
        }
      }
      span{
        margin-left: 20px;
        // padding-top: 10px;
        color: #979797;
        font-size: 15px;
      }
    }
  }
  .sfg{
    width: 100%;
    display: flex;
    margin: 20px 0 20px 0;
    padding: 0 20px 0 20px;
    margin-top: 40px;
    box-sizing: border-box;
    margin-bottom: 20px;
    .sfg-item{
      width: 100%;
      height: 130px;
      background:white;
      padding: 0 20px 0 20px;
      box-sizing: border-box;
      flex:1;
      .sfg-top{
        position: relative;
        padding-top: 20px;
        box-sizing: border-box;
        margin-bottom: 20px;
        .logo{
          width: 85px;
          height: 85px;
          text-align: center;
          line-height: 85px;
          margin-top: -40px;
          font-size: 30px;
          color: white;
          position: absolute;
          border-radius: 15px;

        }
        p{
          width: 100%;
          text-align: right;
          margin-top: -10px;
          margin-bottom: 10px;
          color: #979797;

        }
        h2{
          width: 100%;
          text-align: right;
          color: #898989;
          font-weight: 400;
        }
      }
      &:nth-of-type(2){
        margin: 0 10px 0 20px;
      }
      &:nth-of-type(3){
        margin: 0 20px 0 10px;
      }
      .sfg-bom{
        p{
          i{
            margin-right: 10px;
          }
        }
      }
      &:nth-of-type(1) .sfg-top .logo{
        background: linear-gradient(60deg, #66bb6a, #43a047) !important;
      }
      &:nth-of-type(2) .sfg-top .logo{
        background: #FEA01C;
      }
      &:nth-of-type(3) .sfg-top .logo{
        background: #E8403C;
      }
      &:nth-of-type(4) .sfg-top .logo{
        background: #1CBFD4;
      }
    }
  }
  .bombg{
    width: 100%;
    padding: 20px;
    display: flex;
    box-sizing: border-box;
    margin-bottom: 20px;
    .bom-bg{
      flex: 1;
      position: relative;
      padding: 0 20px;
      .top{
        width: 100%;
        padding: 20px 20px;
        margin-top: -10px;
        box-sizing: border-box;
      }
      &:nth-of-type(1) .top{
          background:#FD9A13;
          color: white;
          span{
            display: block;
                color: rgba(255, 255, 255, 0.62);
                margin-top: 10px;
                font-size: 14px;
          }
      }
      &:nth-of-type(2) .top{
        background: #58B05C;
        color: white;
      }
    }
    .left-bg{
      margin-right: 10px;
      box-sizing: border-box;
      background: white;
      table{
        display: block;
        margin: 20px 0;
        thead{
          display: block;
          width: 100%;
          tr{
            display: block;
            width: 100%;
            display: flex;
            margin: 10px 0;

            th{
              color: #FD9A13;
            }
            th{
              &:nth-of-type(1){
                flex: 1;
                text-align: left
              }
               &:nth-of-type(2){
                 flex: 3;
                 text-align:left
               }
               &:nth-of-type(3){
                 flex: 2;
                 text-align: right;
               }
               &:nth-of-type(4){
                 flex: 2;
                 text-align: right;
               }
               &:nth-of-type(5){
                 flex: 3;
                 text-align: right;
               }
            }
          }
        }
        tbody{
          width: 100%;
          display: block;
          tr{
            display: block;
            width: 100%;
            display: flex;
            margin: 10px 0;
            color: #BABABA;
              border-top:1px solid #EDEDED;
              // margin: 10px 0;
            td{
              margin: 10px 0;
              &:nth-of-type(1){
                flex: 1;
                text-align: left
              }
               &:nth-of-type(2){
                 flex: 3;
                 text-align:left
               }
               &:nth-of-type(3){
                 flex: 2;
                 text-align: right;
               }
               &:nth-of-type(4){
                 flex: 2;
                 text-align: right;
               }
               &:nth-of-type(5){
                 flex: 3;
                 text-align: right;
               }
            }
          }
        }
      }
    }
    .right-bg{
      margin-left: 10px;
      background: white;
      height: 100%;
      .top{
        span{
          a{
            display: inline-block;
            padding: 0 10px;
            color: white;
            padding-bottom: 10px;
            margin-left: 10px;
          }
          .aCont{
            border-bottom: 1px solid #91CD93;
          }
        }
      }
      .bomCont{
        width: 100%;
        margin-top: 10px;
        .bom-list{
          padding: 0 10px;
          display: flex;
          align-items: center;
          margin: 20px 0;
          color: #979797;
          &:nth-of-type(1){
            padding-bottom: 20px;
            border-bottom: 1px solid #EEEEEE;
          }
          .fxk{
            padding: 0 20px;
            input{
              width: 20px;
              height: 20px;
            }
            input[type=checkbox]:after{
              background:white;
              color: white;
            }
          }
          p{
            flex: 1;
            text-align: left;
            align-items: center;
          }
          .bom-icon{
            // flex: 1;
            i{
              font-size: 24px;
              margin: 0 10px;
              &:nth-of-type(1){
                color: #6EBE72;
              }
              &:nth-of-type(2){
                color: red;
              }
            }
          }
        }
      }
    }
  }

}
</style>
